<template>
  <div>
    <van-nav-bar
        title="瑞吉外卖"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
    </van-nav-bar>  

    <div style="border: 1px">
      <van-swipe-cell>
        <van-card
          desc="此商家特别好，信誉度高"
          title="外卖商家"
          class="goods-card"
          thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </van-swipe-cell>
    </div>

    <van-tree-select
      height="110vw"
      :items="items"
      :main-active-index.sync="active"
      @click-nav="change"
    >
      <template #content>
        <van-card
          num="1"
          price="i.price"
          :desc="i.description"
          :title="i.name"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          v-for="(i, index) in list1"
          :key="index"
        >
          <template #tags>
            <van-tag plain type="danger">销量500</van-tag>
          </template>
          <template #footer>
            <van-button size="mini">购买</van-button>
          </template>
        </van-card>
      </template>
    </van-tree-select>

    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">搜索</van-tabbar-item>
      <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
      <van-tabbar-item icon="setting-o">设置</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import axios from '@/comm/api'
export default {
  data() {
    return {
      activeKey: 0,
      active: "",

      items: [],
      list1: [],
    };
  },

  mounted() {},

  methods: {
       onClickLeft() {
            Toast('返回');
        },
        onClickRight() {
            Toast('按钮');
        },
        change(index){
          this.getgoods(this.items[index]['id'])
        },
        getcateslist(){
          axios.get("/index/getcates").then((result) => {
            if (result.data.code==200){
              this.items=result.data.catelist
              console.log('获取成功',result)
            }
          }).catch((err)=>{
            console.log('获取失败',err)
          })
        },   
        getgoods(cateid){
          axios.get("/index/idgetcates?cateid="+cateid).then((result) => {
            if (result.data.code==200){
              this.list1=result.data.catelist
              console.log('获取成功',result)
            }
          }).catch((err)=>{
            console.log('获取失败',err)
          })
        }



  },
  mounted(){
      this.getcateslist();
  }
};
</script>

<style scoped>
</style>

